<template>
  <!-- 搜索栏+新增按钮 -->
  <el-form :model="searchFormData" label-width="50px">
    <el-row>
      <el-col :span="4">
        <el-form-item label="标题:" prop="titleFuzzy">
          <el-input
            placeholder="请输入名称"
            v-model="searchFormData.titleFuzzy"
            clearable
            @keyup.enter="getDataList"
            @clear="getDataList"
          />
        </el-form-item>
      </el-col>
      <el-col :span="4">
        <el-form-item label="状态:" prop="status">
          <el-select
            v-model="searchFormData.status"
            clearable
            placeholder="请选择状态"
            :style="{ width: '100%' }"
          >
            <el-option :value="0" label="草稿"></el-option>
            <el-option :value="1" label="已发布"></el-option>
          </el-select>
        </el-form-item>
      </el-col>
      <el-col :span="4">
        <el-form-item label="分类" prop="categoryId">
          <el-select
            v-model="searchFormData.categoryId"
            clearable
            placeholder="请选择分类"
            :style="{ width: '100%' }"
          >
            <el-option
              :value="item.categoryId"
              :label="item.categoryName"
              v-for="item in categoryList"
              :key="item.categoryId"
            ></el-option>
          </el-select>
        </el-form-item>
      </el-col>
      <el-col :span="5" :style="{ 'padding-left': '10px' }">
        <el-button type="primary" @click="getDataList">搜索</el-button>
      </el-col>
    </el-row>
    <el-row>
      <el-col>
        <el-button type="primary" @click="openEditWindow('add')"
          >新增博客</el-button
        >
      </el-col>
    </el-row>
  </el-form>
  <!-- 数据表格 -->
  <el-table
    class="dataTable"
    :data="tableData.list"
    stripe
    :border="true"
    style="width: 100%"
  >
    <el-table-column label="#" width="36" type="index" />
    <el-table-column prop="cover" label="封面" width="100">
      <template #default="scope">
        <div style="display: flex; align-items: center">
          <el-image
            style="width: 80px; height: 80px"
            fit="fill"
            :src="proxy.imageUrl + scope.row.cover"
          />
        </div>
      </template>
    </el-table-column>
    <el-table-column label="文章信息" min-width="200">
      <template #default="scope">
        <div class="blogInfo">
          <span>标题:{{ scope.row.title }}</span>
          <span>分类:{{ scope.row.categoryName }}</span>
          <span>作者:{{ scope.row.nickName }}</span>
        </div>
      </template>
    </el-table-column>
    <el-table-column prop="editorTypeName" label="编辑器" width="100" />
    <el-table-column prop="type" label="类型" width="60">
      <template #default="scope">{{ scope.row.type==0?'原创':'转载' }}</template>
    </el-table-column>
    <el-table-column prop="allowCommentTypeName" label="评论" width="60" />
    <el-table-column prop="statusName" label="状态" width="80" />
    <el-table-column label="时间" width="225">
      <template #default="scope">
        <div class="timeInfo">
          <span>创建时间:{{ scope.row.createTime }}</span>
          <span>更新时间:{{ scope.row.lastUpdateTime }}</span>
        </div>
      </template>
    </el-table-column>
    <el-table-column label="操作" width="197">
      <template #default="scope">
        <el-button
          type="primary"
          plain
          @click="openEditWindow('edit', scope.row)"
        >
          <Edit style="width: 1em; height: 1em" />
        </el-button>
        <el-divider direction="vertical" />
        <el-button type="danger" plain @click="deleteBlog(scope.row)">
          <Delete style="width: 1em; height: 1em" />
        </el-button>
        <el-divider direction="vertical" />
        <el-button type="warning" plain @click="openPreviewWindow(scope.row)">
          <ZoomIn style="width: 1em; height: 1em" />
        </el-button>
      </template>
    </el-table-column>
  </el-table>
  <!-- 分页 -->
  <el-pagination
    class="pagination"
    :current-page="pageInfo.pageNo"
    :page-size="pageInfo.pageSize"
    :page-sizes="[5, 10, 15]"
    layout="total, sizes, prev, pager, next, jumper"
    :total="pageInfo.totalCount"
    @size-change="handleSizeChange"
    @current-change="handleCurrentChange"
  />

  <!-- 新增、修改博客窗口 -->
  <BlogEdit
    v-show="openCloseEditWindow"
    ref="blogEditRef"
    @close="closeEditWindow"
  ></BlogEdit>

  <!-- 预览窗口 -->
  <BlogPreview
    v-show="openClosePreviewWindow"
    ref="blogPreviewRef"
    @close="closePreviewWindow"
  ></BlogPreview>
</template>

<script setup>
import {
  reactive,
  ref,
  getCurrentInstance,
  onBeforeMount,
} from "vue";
import BlogEdit from "./BlogEdit.vue";
import BlogPreview from "./BlogPreview.vue";
const { proxy } = getCurrentInstance();

// 部署前执行
onBeforeMount(() => {
  getCategoryList();
  getDataList();
});

// 搜索相关
// 搜索数据表单
const searchFormData = reactive({});
// 分类数据列表
const categoryList = ref([]);
// 获取分类数据列表
const getCategoryList = async () => {
  let result = await proxy.Request({
    url: "/category/loadAllCategory4Blog",
  });
  if (!result) {
    proxy.$message.error("获取分类列表失败");
    return;
  }
  categoryList.value = result.data;
};

// 分页相关
// 分页数据
const pageInfo = reactive({
  pageNo: 1,
  pageSize: 15,
  totalCount: 0,
});
// 页容量改变
const handleSizeChange = (val) => {
  pageInfo.pageSize = val;
  getDataList();
};
// 页码改变
const handleCurrentChange = (val) => {
  pageInfo.pageNo = val;
  getDataList();
};

// 数据展示表格相关
// 博客列表数据
const tableData = reactive({});
// 数据搜索
const getDataList = async () => {
  let params = {
    pageNo: pageInfo.pageNo,
    pageSize: pageInfo.pageSize,
  };
  Object.assign(params, searchFormData);
  let result = await proxy.Request({
    url: "/blog/loadBlog",
    params,
  });
  if (!result) {
    proxy.$message.error("获取博客列表失败");
    return;
  }
  tableData.list = result.data.list;
  pageInfo.pageNo = result.data.pageNo;
  pageInfo.pageSize = result.data.pageSize;
  pageInfo.totalCount = result.data.totalCount;
};

// 编辑弹窗相关
// 编辑弹窗控制
let openCloseEditWindow = ref(false);
let openClosePreviewWindow = ref(false);
// 打开编辑弹窗
const openEditWindow = (type, data) => {
  proxy.$refs.blogEditRef.init(type, data);
  openCloseEditWindow.value = true;
};
const openPreviewWindow = (data) => {
  proxy.$refs.blogPreviewRef.getDetail(data.blogId);
  openClosePreviewWindow.value = true;
};

// 关闭弹窗
const closeEditWindow = () => {
  openCloseEditWindow.value = false;
  getDataList();
};
const closePreviewWindow = () => {
  openClosePreviewWindow.value = false;
};

// 删除博客
const deleteBlog = (data) => {
  proxy.$messageBox
    .confirm("确认删除吗？删除内容会移动到回收站！", "删除博客", {
      confirmButtonText: "确定",
      cancelButtonText: "取消",
      type: "warning",
    })
    .then(async () => {
      let result = await proxy.Request({
        url: "/blog/recoveryBlog",
        params: {
          blogId: data.blogId,
        },
      });
      if (!result) {
        proxy.$message.error("删除失败");
        return;
      }
      proxy.$message.success("删除成功");
      getDataList();
    })
    .catch(() => {
      proxy.$message.info("取消删除");
      return;
    });
};
</script>

<style lang="scss" scoped>
.dataTable {
  margin-top: 20px;
  height: calc(100vh - 320px);

  .blogInfo {
    display: flex;
    flex-direction: column;

    span {
      text-overflow: ellipsis;
      overflow: hidden;
      white-space: nowrap;
    }
  }

  .timeInfo{
    display: flex;
    flex-direction: column;
  }
}
.pagination {
  margin-top: 20px;
}
</style>